<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/mui-3.css">
    <link rel="stylesheet" href="font/font3/headlines/iconfont.css">
    <title>读什么</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
          list-style: none;
        }
        .top-all {
          position: sticky;
          top: 0;
          z-index: 99;
          background-color: #fff;
        }
        .top-top {
          
          /* width: 100%; */
          padding: .4267rem 0 .4267rem .48rem;
          
          margin-right: 1.3333rem;
          box-sizing: border-box;
          overflow-x: scroll;
          
          
        }
        
        .top-top::-webkit-scrollbar{
            display: none;
          }
        .top-nav {
          width: 150%;
          font-size: .8rem;
          color: #828282;
          display: flex;
          
        }
        .top-nav li {
          padding: 0 .65rem;
          box-sizing: border-box;
        }
        .recommend {
          font-size: .9067rem;
          color: #141414;
          font-weight: 600;
          position: relative;
        }
        .recommend::after {
          content: "";
          position: absolute;
          bottom: -0.2667rem;
          left: 50%;
          transform: translate(-50%);
          border-radius: .16rem;
          width: .96rem;
          height: .16rem;
          background: #141414;

        }
        .all {
            margin-top: .6933rem;
            width: 100%;
            padding: 0 .8rem;
            box-sizing: border-box;
        }
        .swiper-backface-hidden img {
          border-radius: .4267rem !important;
          overflow: hidden;
        }
        .swiper-pagination-bullets {
          bottom: .5333rem !important;
          right: .32rem !important;
        }
        .swiper-pagination-bullet {
          width: .2133rem !important;
          height: .2133rem !important;
        }
        .swiper-pagination-bullet-active {
          background-color: #fff !important;
          margin: 0 .16rem !important;
        }
        .swiper-pagination-bullet {
          margin: 0 .16rem !important;
        }
        .center {
          width: 100%;
          padding: 0 .8rem;
          box-sizing: border-box;
          margin-top: 1.0667rem;
        }
        .center-place {
          display: flex;
          margin-bottom: .6933rem;
          width: 100%;
        }
        .center-place img {
          width: 1.0667rem;
          height: 1.0667rem;
          margin-right: .2667rem;
          border-radius: 50%;
        }
        .center-place-author {
          font-size: .5867rem;
          line-height: 1.0667rem;
          color: #828282;
        }
        .center-text {
          display: flex;
          justify-content: space-between;
          margin-bottom: 1.0133rem;
          width: 100%;
        }
        .center-text-title {
          width: 13.3333rem !important;
          height: 2.3467rem;
          font-size: .9067rem;
          font-weight: 600;
          color: #141414;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: .9067rem;
        }
        .center-text-popular {
          display: flex;
          align-items: center;
        }
        .center-text-sort {
          border: 1px solid #3a3a3a;
          border-radius: .16rem;
          padding: .0533rem .1067rem .1067rem;
          font-size: .5867rem;
          margin-right: .7467rem;
          line-height: .5867rem;
          box-shadow: 0px 0px 1px 0px;
        }
        .fin {
          color: #a0a0a0;
          font-size: .7467rem !important;
        }
        .fin+span {
          font-size: .5867rem;
          color: #a0a0a0;
          margin-right: .7467rem;
        }
        .center-right {
          width: 4.5867rem;
          height: 4.5867rem;
          position: relative;
          text-align: center;
          border-radius: .4267rem;
          overflow: hidden;
        }
        .pic {
          width: 100%;
          height: 100%;
          
        }
        .rd {
          width: 100%;
          line-height: 1.3333rem;
          position: absolute;
          bottom: 0;
          text-align: center;
          background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, .8));
          color: #fff;
          font-size: .5333rem;
        }
        .everyday-sentence {
          padding: .96rem 0 1.0667rem;
          background-color: #fdf5ef;
          width: 100%;
          overflow: hidden;
          
        }
        .everyday-sentence-top {
          width: 100%;
          line-height: 1.12rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 .9067rem 0 .7467rem;
          box-sizing: border-box;
        }
        .everyday-sentence-top img {
          width: 3.7333rem;
        }
        .everyday-sentence-top p {
          font-size: .6933rem;
          color: #9d948e;
          margin-right: .2667rem;
        }
        .icon-right {
          font-size: .5867rem !important;
          color: rgb(157, 148, 142);
        }
        .everyday-sentence-top-right {
          display: flex;
        }
        .everyday-sentence-text {
          width: 194%;
          display: flex;
          overflow-x: scroll;
          margin-top: .64rem;
        }
        .everyday-sentence-text-bk {
          margin-left: .7467rem;
          background: url('https://img60.ddimg.cn/upload_img/00610/uniapp/daily-golden-sentence-signal-1636018372.png')#fff .1067rem .1067rem/1.3333rem no-repeat;
          width: 12.4267rem;
          height: 6.4533rem;
          border-radius: .5333rem;
          padding: 1.0133rem .8rem .5867rem;
          box-sizing: border-box;
        }
        .everyday-sentence-text-bk p:nth-of-type(1) {
          min-height: 3.52rem;
          font-size: .7467rem;
          color: #5c4e49;
          line-height: 1.1733rem;
        }
        .everyday-sentence-text-bk p:nth-of-type(2) {
          font-size: .64rem;
          color: #acacac;
          margin-top: .2667rem;
          line-height: .8533rem;
          text-align: end;
        }
        .two {
          display: none;
        }
        .tv {
          margin-top: .6667rem;
          display: flex;
          justify-content: space-between;
          padding: 0 .48rem 0 .8rem;
        }
        .tv-left {
          width: 9.0667rem;
        }
        .tv-left li,.tv-right li{
          margin-bottom: 1.0667rem;
        }
        .tv-right {
          width: 9.0667rem;
        }
        .tv-big-start {
          width: 9.0667rem;
          height: 12.0533rem;
          border-radius: .5333rem;
          overflow: hidden;
          position: relative;
        }
        .tv-big-pic {
          width: 100%;
          height: 100%;
        }
        .tv-small-start {
          width: 9.0667rem;
          height: 6.8267rem;
          border-radius: .5333rem;
          overflow: hidden;
          position: relative;
        }
        .bofong1 {
          /* width: 1.0667rem;
          height: 1.12rem; */
          font-size: 1.0667rem !important;
          position: absolute;
          top: .4267rem;
          right: .4267rem;
          width: 1.0667rem;
          height: 1.12rem;
          background: url('image/img3/bofang.png')center/100% no-repeat;
        }
        .tv-small-pic {
          width: 100%;
          height: 100%;
        }
        .three {
          display: none;
        }
        .tv-intro {
          font-size: .7467rem;
          color: #2e2e2e;
          margin-top: .5333rem;
          padding: 0 .2667rem;
          box-sizing: border-box;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 600;
          height: 2.048rem;
        }
        .tv-author {
          display: flex;
          align-items: center;
          margin-top: .5333rem;
          padding: 0 .2667rem;
          box-sizing: border-box;
        }
        .tv-author img {
          width: 1.3867rem;
          height: 1.3867rem;
          border-radius: 50%;
          margin-right: .2667rem;
        }
        .tv-author-io {
          font-size: .5867rem;
          color: #828282;
          width: 5.28rem;
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .tv-author-intro p:nth-of-type(1) {
          font-size: .5867rem;
          color: #828282;
          width: 4.9067rem;
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .tv-author-intro p:nth-of-type(2) {
          font-size: .48rem;
          color: #1b8af3;
          width: 4.9067rem;
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          background-color: rgba(43, 153, 247, .12);
          border-radius: .7467rem;
        }
        .tv-num {
          font-size: .64rem;
          color: #828282;
        }
    </style>
</head>
<body>
    <div class="top-all">
      <div class="top-top">
        <ul class="top-nav">
          <li class="recommend">推荐</li>
          <li>视频</li>
          <li>荐书</li>
          <li>人文</li>
          <li>丈量世界</li>
          <li>亲子育儿</li>
          <li>话题</li>
          <li>翻篇</li>
        </ul>
      </div>
    </div>
    <div class="first">
      <div class="all">
        <div class="swiper mySwiper swiper-initialized swiper-horizontal swiper-backface-hidden">
            <div class="swiper-wrapper" id="swiper-wrapper-7cd9d566f9c5add6" aria-live="polite">
              <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 9" data-swiper-slide-index="0" style="width: 1482px; margin-right: 30px;"><img style="width: 100%;" src="https://img60.ddimg.cn/2024/7/3/202407031609533024.jpg" alt=""></div>
              <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 9" data-swiper-slide-index="1" style="width: 1482px; margin-right: 30px;"><img style="width: 100%;" src="https://img62.ddimg.cn/2024/7/31/2024073110221497489.jpg" alt=""></div>
              <div class="swiper-slide" role="group" aria-label="3 / 9" data-swiper-slide-index="2" style="width: 1482px; margin-right: 30px;"><img style="width: 100%;" src="http://img61.ddimg.cn/upload_img/00478/0609/0413-sdgcccccccc-1649846482.png" alt=""></div>
            </div>
            <!-- <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-7cd9d566f9c5add6"></div> -->
            <!-- <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-7cd9d566f9c5add6"></div> -->
            <div style="display: inline-flex; justify-content: flex-end;" class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span></div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>
      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图1.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">人生缘何不快意，只因未读刘禹锡</p>
            <div class="center-text-popular">
              <p class="center-text-sort">荐书</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>1</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图1-1.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图2.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">“迅哥儿”为什么在年轻人中这么火？  “很简单，就是疗愈”</p>
            <div class="center-text-popular">
              <p class="center-text-sort">话题</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>1</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图2-2.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="everyday-sentence">
        <div class="everyday-sentence-top">
          <img src="image/img3/everyday.png" alt="">
          <div class="everyday-sentence-top-right">
            <p>更多</p>
            <i class="iconfont icon-right"></i>
          </div>
        </div>
        <div style="overflow-x: scroll;">
          <div class="everyday-sentence-text">
            <div class="everyday-sentence-text-bk">
              <p>树叶落在湖面会泛起涟漪，巨石跌进大海却不被人发觉。</p>
              <p>-沈星星</p>
            </div>
            <div class="everyday-sentence-text-bk" style="margin-left: .5867rem;">
              <p>“你以后爱一个人或者恨一个人不要那么快，慢慢来，一定要慢慢来。”...</p>
              <p>-沈星星</p>
            </div>
            <div class="everyday-sentence-text-bk" style="margin-left: .5867rem;">
              <p>一个人在异国，漫无目的地活着，其实是件挺孤单的事。</p>
              <p>-沈星星</p>
            </div>
          </div>
        </div>

      </div>







      <div class="center">
        <div class="center-place">
          <img src="image/img3/图3.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">74个孩子因为“太听话”而死掉，“明明乖乖照老师说的做了”</p>
            <div class="center-text-popular">
              <p class="center-text-sort">人文</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>12</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图3-3.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图3.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">横扫欧美榜单！这位畅销书女作家，她的人生比电影更跌宕</p>
            <div class="center-text-popular">
              <p class="center-text-sort">人文</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>10</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>2</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图4-4.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图3.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">人人心里都有一部《傲慢与偏见》，这个孔雀蓝版本精致到任性</p>
            <div class="center-text-popular">
              <p class="center-text-sort">荐书</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>3</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图5-5.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图6.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">秋风依旧人不同：唐诗里那些悲秋伤怀的千古绝唱</p>
            <div class="center-text-popular">
              <p class="center-text-sort">人文</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>8</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图6-6.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
    </div>
    <div class="two">
      <div class="tv">
        <ul class="tv-left">
          <li>
            <div class="tv-big-start">
              <img class="tv-big-pic" src="image/img3/tv-1.jpg" alt="">
              <i class="bofong1"></i>
            </div>
            <p class="tv-intro">打开这套书，嘴巴就没合上过！</p>
            <div class="tv-author">
              <img src="image/img3/tv-hd1.jfif" alt="">
              <p class="tv-author-io">阿卡狄亚童书馆旗舰店</p>
              <i class="iconfont icon-dianzan" style="font-size: .9067rem;margin-left: .64rem;"></i>
              <p class="tv-num">16</p>
            </div>
          </li>
          <li>
            <div class="tv-small-start">
              <img class="tv-small-pic" src="image/img3/tv1-2.jpg" alt="">
              <i class="bofong1"></i>
            </div>
            <p class="tv-intro">云游景迈山，全球首个茶文化世界遗产。</p>
            <div class="tv-author">
              <img src="image/img3/tv-hd1-2.jfif" alt="">
              <div class="tv-author-intro">
                <p>上海人民美术出版社</p>
                <p>上海人民美术出版社官方账号</p>
              </div>
              <i class="iconfont icon-dianzan" style="font-size: .9067rem;margin-left: .64rem;"></i>
              <p class="tv-num">6</p>
            </div>
          </li>
          <li>
            <div class="tv-big-start">
              <img class="tv-big-pic" src="image/img3/tv1-3.jpg" alt="">
              <i class="bofong1"></i>
            </div>
            
            <p class="tv-intro">高中开学，应该准备什么</p>
            <div class="tv-author">
              <img src="image/img3/tv-hd-1-3.jfif" alt="">
              <div class="tv-author-intro">
                <p>飞鱼文化</p>
                <p>广州飞鱼文化有限公司官方账号</p>
              </div>
              <i class="iconfont icon-dianzan" style="font-size: .9067rem;margin-left: .64rem;"></i>
              <p class="tv-num">8</p>
            </div>
          </li>
        </ul>
        <ul class="tv-right">
          <li>
            <div  class="tv-small-start">
              <img class="tv-small-pic" src="image/img3/tv2.jpg" alt="">
              <i class="bofong1"></i>
            </div>
            
            <p class="tv-intro">一口气看完《战国策》、《左传》、《国语》、《史记》</p>
            <div class="tv-author">
              <img src="image/img3/tv-hd1-2.jfif" alt="">
              <div class="tv-author-intro">
                <p>上海人民美术出版社</p>
                <p>上海人民美术出版社官方账号</p>
              </div>
              <i class="iconfont icon-dianzan" style="font-size: .9067rem;margin-left: .64rem;"></i>
              <p class="tv-num">2</p>
            </div>
          </li>
          <li>
            <div class="tv-big-start">
              <img class="tv-big-pic" src="image/img3/tvriight2.jpg" alt="">
              <i class="bofong1"></i>
            </div>
            <p class="tv-intro">傣族民间叙事长诗“召树屯和喃婼娜”——《孔雀公主》</p>
            <div class="tv-author">
              <img src="image/img3/tv-hd1-2.jfif" alt="">
              <div class="tv-author-intro">
                <p>上海人民美术出版社</p>
                <p>上海人民美术出版社官方账号</p>
              </div>
              <i class="iconfont icon-dianzan" style="font-size: .9067rem;margin-left: .64rem;"></i>
              <p class="tv-num">4</p>
            </div>
          </li>
          <li>
            <div class="tv-big-start"> 
              <img class="tv-big-pic" src="image/img3/tvrigt2-3.jpg" alt="">
              <i class="bofong1"></i>
            </div>
            <p class="tv-intro">了解茶文化，从景迈山开始，全球首个茶文化世界遗产</p>
            <div class="tv-author">
              <img src="image/img3/tv-hd1-2.jfif" alt="">
              <div class="tv-author-intro">
                <p>上海人民美术出版社</p>
                <p>上海人民美术出版社官方账号</p>
              </div>
              <i></i>
              <p></p><i class="iconfont icon-dianzan" style="font-size: .9067rem;margin-left: .64rem;"></i>
              <p class="tv-num">5</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="three">
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图3.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">74个孩子因为“太听话”而死掉，“明明乖乖照老师说的做了”</p>
            <div class="center-text-popular">
              <p class="center-text-sort">人文</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>12</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图3-3.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图3.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">横扫欧美榜单！这位畅销书女作家，她的人生比电影更跌宕</p>
            <div class="center-text-popular">
              <p class="center-text-sort">人文</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>10</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>2</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图4-4.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图3.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">人人心里都有一部《傲慢与偏见》，这个孔雀蓝版本精致到任性</p>
            <div class="center-text-popular">
              <p class="center-text-sort">荐书</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>3</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图5-5.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图6.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">秋风依旧人不同：唐诗里那些悲秋伤怀的千古绝唱</p>
            <div class="center-text-popular">
              <p class="center-text-sort">人文</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>8</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图6-6.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图1.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">人生缘何不快意，只因未读刘禹锡</p>
            <div class="center-text-popular">
              <p class="center-text-sort">荐书</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>1</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图1-1.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>
      <div class="center">
        <div class="center-place">
          <img src="image/img3/图2.jfif" alt="">
          <p class="center-place-author">北大社荐读</p>
        </div>
        <div class="center-text">
          <div>
            <p class="center-text-title">“迅哥儿”为什么在年轻人中这么火？  “很简单，就是疗愈”</p>
            <div class="center-text-popular">
              <p class="center-text-sort">话题</p>
              <i class="fin iconfont icon-dianzan"></i>
              <span>1</span>
              <i class="fin iconfont icon-pinglun"></i>
              <span>评论</span>
            </div>
          </div>
          <div class="center-right">
            <img class="pic" src="image/img3/图2-2.jpg" alt="">
            <p class="rd">301人已读</p>
          </div>
        </div>

      </div>

    </div>
</body>
<script src="js/reset3-1.js"></script>
<script src="js/reset-3.js"></script>
<script>
    var topNav=document.querySelectorAll('.top-nav li')
    var topNav1=document.querySelector('.top-nav')
    var first=document.querySelector('.first')
    var two=document.querySelector('.two')
    var three=document.querySelector('.three')
    var html=document.querySelector('html')

    console.log(topNav)
    for(i=0; i<topNav.length; i++){
    
      topNav[i].onclick=function(){
        
        for(j=0; j<topNav.length; j++){
          console.log(topNav[j].classList.remove('recommend'))
        }
      console.log(event.target.classList.add('recommend'))
      // if(event.target.innerHTML=='丈量世界'){
      //   console.log(111)
      //   console.log(topNav1.scrollTo(0,400))
      // }
      if(event.target.innerHTML=='推荐'){
        first.style.display='block'
        two.style.display='none'
        three.style.display='none'
        html.scrollTo(0,0)
      }
      if(event.target.innerHTML=='视频'){
        first.style.display='none'
        two.style.display='block'
        three.style.display='none'
        html.scrollTo(0,0)
      }
      
      if(event.target.innerHTML=='荐书'){
        first.style.display='none'
        two.style.display='none'
        three.style.display='block'
        html.scrollTo(0,0)
      }
      }
      
      
      // topNav[i].classList.remove('recommend')
      
    }



    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    // var gallery = gallery('.mySwiper');
    // gallery.slider({
    //   interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
    // });
  


    // fetch("https://api.dangdang.com/ugc/top/recommendList?client_version=1.0&user_client=touch&permanent_id=20240826154930849226076799612933471&udid=c8a099f0f588a416866047957eac0475&timestamp=1724659869860&union_id=&unionId=&cv=1.0&ct=touch&ts=1724659869860&time_code=468b1dd70e81e2b4eb89af3f912e2ee8&tc=50f1d6eb66a97c0a20a1b423b5d0485d&page=1&pageSize=10").then(res=> res.json()).then(res0=> {
    //   console.log(111,res0)
    // })

    // fetch("https://api.dangdang.com/ugc/golden/dailyGoldenList?client_version=1.0&user_client=touch&permanent_id=20240821155942344452739776424893461&udid=133351efaf62a8518e06d2d3f8129a56&timestamp=1724314106042&union_id=&unionId=&cv=1.0&ct=touch&ts=1724314106042&time_code=4ae43c79f78e97448da1a4bf3caa1d9a&tc=d32a43d00735db5586c75df4b77b54ee").then(res=> res.json()).then(res1=> {
    //   console.log(222,res1)
    // })


    // fetch("https://api.dangdang.com/ugc/top/recommendList?client_version=1.0&user_client=touch&permanent_id=20240821155942344452739776424893461&udid=133351efaf62a8518e06d2d3f8129a56&timestamp=1724314768367&union_id=&unionId=&cv=1.0&ct=touch&ts=1724314768367&time_code=e6dbc386771b77fd4baaedc359213370&tc=52e2bae7415dff75ac96d6da16d00ffe&page=2&pageSize=10").then(res=> res.json()).then(res2=> {
    //   console.log(333,res2)

    // })


    
</script>
</html>